import {useBoolean} from "ahooks";
import {Button, Form, Modal, Image, Table} from "antd";
import {useList} from "@/hooks";
import {adFindApplyUser} from "@/api";
import {InputFormItem} from "@/components/common/form/formItem";
import {columnsIndex, columnsOpenid, columnsSetting, getColumnsName} from "@/components/Columns";

export default function UserDetail() {
    const [form] = Form.useForm();
    const [open, {setFalse, setTrue}] = useBoolean(false);
    const handleJoin = (row: any) => {
        setTrue();
        form.setFieldsValue(row);
    };
    const {data} = useList({api: adFindApplyUser});

    const columns = [
        columnsIndex,
        getColumnsName(),
        {title: "头像", dataIndex: "img", key: "img", render: (val: any) => <Image src={val} width={50} />},
        columnsOpenid,
        {title: "申请时间", dataIndex: "time", key: "time"},
        {
            ...columnsSetting,
            width: 200,
            render: (_: any, row: any) => (
                <div className="flr">
                    <Button type="primary" danger size="small" onClick={() => handleJoin(row)}>
                        成为合作者
                    </Button>
                </div>
            ),
        },
    ];
    return (
        <div className="components-list">
            <Table rowKey={row => JSON.stringify(row)} dataSource={data.list} columns={columns} />
            <Modal bodyStyle={{paddingTop: 30}} className="user-list-modal" open={open} onCancel={setFalse}>
                <Form form={form} labelCol={{span: 4}}>
                    <InputFormItem name="id" hidden />
                    <InputFormItem name="name" label="名称" disabled />
                    <InputFormItem name="openpid" label="openpid" disabled />
                    <InputFormItem name="pid" label="推广位" />
                </Form>
            </Modal>
        </div>
    );
}
